import React, { PureComponent } from 'react';
import { Form, Input, TreeSelect, Select, notification } from 'antd';
import { connect } from 'dva';
import "./form.less"
import { worker } from "../../utils/worker"
class RelateProp extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            propsList: [],
            plist: []
        }
        this.onConfirm = this.onConfirm.bind(this)
        this.onSelect = this.onSelect.bind(this)
        this.onSelect2 = this.onSelect2.bind(this)
    }
    async componentDidMount() {
        if (this.props.onLoaded) {
            this.props.onLoaded(this);
        }
        let res = await this.props.getCateTree({})
        let resc = await worker.loopTreeNode2(res, null, true)
        const { colNum } = this.props.extra;
        let arr = []
        if (colNum - 0 > 0) {
            for (let i = 0; i < colNum; i++) {
                arr.push({
                    id: i,
                    name: i
                })
            }
        } else {
            arr.push({
                id: 0,
                name: '无'
            })
        }
        this.setState({
            plist:arr
        })
        if (resc) {
            this.setState({
                expandedKeys: resc.map(item => String(item.key)),
                treeData: resc
            })
        }
    }
    onConfirm(params = {}) {
        return new Promise((resolve, reject) => {
            this.props.form.validateFields(async (error, values) => {
                if (!error) {
                    await this.setState({
                        confirmType: 1,
                        confirmData: values
                    })
                    resolve()
                    if (params.onSuccess) {
                        params.onSuccess(values);
                    }
                } else {

                    if (params.onError) {
                        params.onError(error);
                    }
                    reject()
                }
            })
        })
    }
    async onSelect(e, a) {
        let res = await this.props.cusPropsList({ definitionPartId: e })
        this.setState({
            propsList: res
        })
    }
    onSelect2(e, a) {
        this.props.form.setFieldsValue({
            name: a.props.children
        })
    }
    render() {
        const { treeData, propsList, plist } = this.state;
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <Form
                    style={{ marginTop: "20px" }}
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    labelAlign="right"
                >
                    <Form.Item label='选择部位' className="half">
                        {getFieldDecorator('definitionPartId', {
                            rules: [
                                { required: true, message: '选择部位' }
                            ]
                        })(
                            <TreeSelect
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                placeholder="请选择构件"
                                treeData={treeData}
                                treeDefaultExpandAll
                                onSelect={this.onSelect}
                            ></TreeSelect>
                        )}
                    </Form.Item>
                    <Form.Item label='选择属性' className="half">
                        {getFieldDecorator('propertyId', {
                            rules: [
                                { required: true, message: '选择属性' }
                            ]
                        })(
                            <Select onSelect={this.onSelect2} placeholder="请选择属性" showSearch filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                                {
                                    propsList && propsList.length ? propsList.map(item => {
                                        return (
                                            <Select.Option value={item.id} key={item.id}>{item.name.replace(/^([^\，]*).*$/, function ($all, $1) { return $1 })}</Select.Option>
                                        )
                                    }) : undefined
                                }

                            </Select>
                        )}

                    </Form.Item>
                    <Form.Item label='选择墩号' className="half">
                        {getFieldDecorator('pileNumber', {
                            rules: [
                                { required: true, message: '选择墩号' }
                            ]
                        })(
                            <Select onSelect={this.onSelect2} placeholder="请选择墩号" showSearch filterOption={(input, option) =>
                                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                                {
                                    plist && plist.length ? plist.map(item => {
                                        return (
                                            <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                                        )
                                    }) : undefined
                                }

                            </Select>
                        )}

                    </Form.Item>

                    <Form.Item label='属性名称' className="half hide">
                        {getFieldDecorator('name', {
                            rules: [
                                { required: true, message: '属性名称' }
                            ]
                        })(
                            <Input />
                        )}
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default connect(
    ({ dict: { dictlist }, }) => ({ dictlist }),
    dispatch => ({
        getCateTree: (values) => dispatch({
            type: 'structure/getCateTree',
            payload: values
        }),
        cusPropsList: (values) => dispatch({
            type: 'cusProps/cusPropsList',
            payload: values
        }),
    })
)(Form.create('eelateProp', {

})(RelateProp));